import { HTableColumns } from "@/components/ant-ext-table/HTable";
import { Form } from "antd";
import HDataTable from "@/components/ant-ext-table/HDataTable";
import { DeleteOutlined, PlusSquareOutlined } from "@ant-design/icons";
import SysNotife from "@/api/sys-notice";
import NotifeEdit from "@/pages/sysNotice/edit";
import HAction from "@/components/common/HAction";
import { HDataTableSlice } from "@/components/ant-ext-table/redux/dataTableSlice";
import { useDispatch } from "react-redux";
import { Dispatch } from "redux";

function getColumns(dispatch: Dispatch): HTableColumns<any> {
    return [
        {
            title: "id",
            dataIndex: 'id',
            width: '80px',
            fixed: 'left'
        }, {
            title: "标题",
            width: '150px',
            dataIndex: 'title',
        }, {
            title: "内容",
            dataIndex: 'content',
        }, {
            title: '操作',
            width: '150px',
            dataIndex: 'action',
            render: (_, record) => (
                <div >
                    <HAction type={"link"}
                        empower={SysNotife.EDIT}
                        invalid
                        action={() => dispatch!(HDataTableSlice.actions.doAction({
                            action: SysNotife.EDIT,
                            rowKey: SysNotife.RowKey,
                            row: record
                        }))}
                        children={'修改'} />
                </div>
            ),
        },
    ]
}

export default function SystemNotifications() {
    const [form] = Form.useForm()
    const dispatch = useDispatch()

    return <>
        <NotifeEdit />
        <div className="parent">
            <div className={"dataTable"}>
                <HDataTable
                    option={[
                        { key: SysNotife.ADD, title: "新增", icon: <PlusSquareOutlined /> },
                        {
                            key: SysNotife.DEL,
                            title: "删除",
                            // mode: "multi",
                            mode: "only",
                            icon: <DeleteOutlined style={{ color: "red" }} />,
                            confirm: "是否要删除所选数据",
                            action: (data) => {
                                SysNotife.delete({
                                    body: { id: data.selectRowKeys[0] },
                                    success: () => dispatch(HDataTableSlice.actions.setQueryParams({}))
                                })
                            }
                        },
                    ]}
                    unSort={true}
                    queryForm={{
                        form: form,
                        item: [
                            { name: "content", label: "内容" }
                        ]
                    }}
                    columns={getColumns(dispatch)} selectMethod={SysNotife.selectTablePage}
                    rowKey={SysNotife.RowKey}
                />
            </div>
        </div>
    </>
}